<!--
 Author: Li
 Date: 7/22/2025 18:30
 Description: m-menu
-->
<template>
  <div class="menu">
    <div class="menu-item" v-for="item in menuList" :key="item.title" @click="onClick(item)">
      <div class="icon-wrapper">
        <image class="icon" :src="item.icon"></image>
      </div>
      <div class="title">{{ item.title }}</div>
    </div>
  </div>
</template>
<script setup>
import IconKaijuan from '@/assets/icon-kaijuan.svg';
import IconGuzao from '@/assets/icon-guzao.svg';
import IconGuanzhan from '@/assets/icon-guanzhan.svg';
import IconYanchu from '@/assets/icon-yanchu.svg';
import IconHuodong from '@/assets/icon-huodong.svg';
import IconYipei from '@/assets/icon-yipei.svg';
import IconYangsheng from '@/assets/icon-yangsheng.svg';
import { ref } from 'vue';

const menuList = ref([
  {
    icon: IconKaijuan,
    title: '开卷',
    path: '',
  },
  {
    icon: IconGuzao,
    title: '古早',
    path: '',
  },
  {
    icon: IconGuanzhan,
    title: '观展',
    path: '',
  },
  {
    icon: IconYanchu,
    title: '演出',
    path: '',
  },
  {
    icon: IconHuodong,
    title: '活动',
    path: '',
  },
  {
    icon: IconYipei,
    title: '艺培',
    path: '',
  },
  {
    icon: IconYangsheng,
    title: '养生',
    path: '',
  },
]);

function onClick(item) {
  uni.navigateTo({
    url: item.path,
  });
}
</script>

<style scoped lang="scss">
.menu {
  //border: 1px dashed black;
  display: flex;
  justify-content: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  padding: 30rpx 10rpx;
  gap: 10rpx 0;
}

.menu-item {
  width: calc(100% / 7);

  .icon-wrapper {
    //border: 1px dashed black;
    font-size: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    .icon {
      width: 75rpx;
      height: 75rpx;
    }
  }

  .title {
    font-size: 28rpx;
    text-align: center;
    margin-top: 5rpx;
  }
}
</style>
